<script setup>
import { ref, computed, onMounted } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { getUserInfoAPI, updateUserStatusAPI } from '@/apis/admin'
import avatar from '@/assets/images/avatar.jpg'
const userAvatar = avatar
// 响应式数据
const userList = ref([])
const searchName = ref('')
const pageSize = ref(5)//每页条数
const page = ref(1)//当前页//分页条数据模型
const total = ref(20)//总条数

// 方法
const getUserInfo = async () => {
    let userParams = ref({
        page: page.value,
        pageSize: pageSize.value,
        searchName: searchName.value
    })
    const res = await getUserInfoAPI(userParams.value)
    console.log(res.data);
    userList.value = res.data.data.items
    total.value = res.data.data.counts
}

//清除搜索信息
const clearSearchInfo = () => {
    searchName.value = ''
}

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
    pageSize.value = size
    getUserInfo()
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
    page.value = num
    getUserInfo()
}

// 状态更新方法
const updateUserStatus = async (username, newVal) => {
    const newStatus = newVal ? 1 : 0
    //参数
    let Params = ref({
        status: newStatus,
        username: username
    })
    // 调用API接口
    await updateUserStatusAPI(Params.value)
    ElMessage.success('修改成功')
    getUserInfo()
}

// 生命周期钩子
onMounted(() => {
    getUserInfo()
})
</script>


<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>买家管理</span>
            </div>
        </template>
        <!-- 搜索-->
        <div class="header">
            <el-form inline>
                <el-form-item>
                    <el-input :prefix-icon="Search" v-model="searchName" style="width: 200px" placeholder="请输入用户名" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getUserInfo()">搜索</el-button>
                    <el-button @click="clearSearchInfo()">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!-- 表格视图 -->
        <el-table :data="userList" style="width: 100%">
            <!-- 头像列保持不变 -->
            <el-table-column prop="userPic" label="头像" width="100">
                <template #default="{ row }">
                    <el-avatar :size="50" :src="row.userPic ? row.userPic : userAvatar" />
                </template>
            </el-table-column>

            <!-- 用户名列保持不变 -->
            <el-table-column prop="username" label="用户名" sortable />

            <!-- 昵称列 -->
            <el-table-column prop="nickname" label="昵称">
                <template #default="{ row }">
                    {{ row.nickname || '待补充' }}
                </template>
            </el-table-column>

            <!-- 性别列 -->
            <el-table-column prop="gender" label="性别">
                <template #default="{ row }">
                    <span v-if="row.gender === 0">女</span>
                    <span v-else-if="row.gender === 1">男</span>
                    <span v-else-if="row.gender === 2">保密</span>
                    <span v-else>未知</span>
                </template>
            </el-table-column>
            <!-- 电话列 -->
            <el-table-column prop="phone" label="电话">
                <template #default="{ row }">
                    {{ row.phone || '待补充' }}
                </template>
            </el-table-column>
            <!-- 邮箱列 -->
            <el-table-column prop="email" label="邮箱">
                <template #default="{ row }">
                    {{ row.email || '待补充' }}
                </template>
            </el-table-column>
            <!-- 状态列保持不变 -->
            <!-- 状态列 -->
            <el-table-column prop="status" label="状态">
                <template #default="{ row }">
                    <el-switch :model-value="row.status === 1" active-text="启用" inactive-text="禁用"
                        @change="(val) => updateUserStatus(row.username, val)" />
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页条 -->
        <el-pagination v-model:current-page="page" v-model:page-size="pageSize" :page-sizes="[2, 5, 10, 15]"
            layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
            @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />
    </el-card>
</template>



<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    /*padding: 20px;*/
    background: #fff;
    /* 确保容器背景白 */
}

.header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.card-container {
    margin: 20px 0;
}

.user-card {
    margin-bottom: 20px;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 15px;
}

.user-info h3 {
    margin: 0;
    font-size: 16px;
}

.user-info p {
    margin: 5px 0 0;
    font-size: 12px;
    color: #666;
}

.card-content {
    min-height: 120px;
}

.card-footer {
    display: flex;
    justify-content: space-between;
}

.el-pagination {
    justify-content: center;
    margin-top: 20px;
}
</style>